<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <script src="/static/js/vue-2.7.14.js"></script>
    <script src="/static/js/axios-1.4.0.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        nav {
            background-color: #2c3e50;
            color: white;
            padding: 15px 0;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        nav ul li a:hover {
            color: #3498db;
        }

        .article-details {
            width: 90%;
            max-width: 1200px;
            margin: 30px auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .article-details:hover {
            transform: translateY(-5px);
        }

        .article-details h2 {
            margin-top: 0;
            color: #2c3e50;
        }

        .article-details .date {
            color: #7f8c8d;
            font-size: 0.9em;
            margin-bottom: 10px;
        }

        .article-details p {
            color: #34495e;
        }

        .comment-section {
            width: 90%;
            max-width: 1200px;
            margin: 30px auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .comment-section:hover {
            transform: translateY(-5px);
        }

        .comment {
            border-bottom: 1px solid #eee;
            padding: 15px 0;
        }

        .comment:last-child {
            border-bottom: none;
        }

        .comment .user-info {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .comment .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }

        .comment .user-info span {
            font-weight: bold;
            color: #2c3e50;
        }

        .comment .content {
            margin-bottom: 10px;
            color: #34495e;
        }

        .comment .date {
            color: #7f8c8d;
            font-size: 0.9em;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin: 30px 0;
            gap: 10px;
        }

        .pagination button {
            color: #2c3e50;
            padding: 8px 12px;
            text-decoration: none;
            border-radius: 4px;
            border: 1px solid #bdc3c7;
            background-color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .pagination button.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }

        .pagination button:hover:not(.active) {
            background-color: #ecf0f1;
        }

        .total-comments {
            margin-left: 20px;
            color: #7f8c8d;
            font-size: 0.9em;
            border-radius: 4px;
            padding: 8px 12px;
        }

        .add-comment {
            width: 90%;
            max-width: 1200px;
            margin: 30px auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .add-comment:hover {
            transform: translateY(-5px);
        }

        .add-comment input,
        .add-comment textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .add-comment button {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .add-comment button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">联系</a></li>
    </ul>
</nav>
<div id="app">
    <div class="article-details">
        <h2>{{article.title}}</h2>
        <p class="date">{{article.publishDate}}</p>
        <p>{{article.content}}</p>
    </div>
    <div class="comment-section">
        <h3>评论区</h3>
        <div v-for="comment in article.commentPage.records" :key="comment.commentId" class="comment">
            <div class="user-info">
                <img src="/static/img/icon.jpg" alt="用户头像">
                <span>{{comment.userDto.username}}</span>
            </div>
            <div class="content">{{comment.commentContent}}</div>
            <div class="date">{{comment.commentDate}}</div>
        </div>
    </div>
    <div class="pagination">
        <button @click="prevPage" :disabled="commentPageNum === 1">上一页</button>
        <button v-for="(page, index) in pageNumbers" :key="index" :class="{ active: page === commentPageNum }"
                @click="changePage(page)">{{page}}</button>
        <button @click="nextPage" :disabled="commentPageNum === article.commentPage.pages">下一页</button>
        <span class="total-comments">总评论数: {{article.commentPage.total}}</span>
    </div>
    <div class="add-comment">
        <h3>发表评论</h3>
        <input v-model="userId" type="text" placeholder="请输入用户 ID">
        <textarea v-model="commentContent" placeholder="请输入评论内容"></textarea>
        <button @click="submitComment">提交评论</button>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            article: {},
            articleId: '',
            commentPageNum: 1,
            commentPageSize: 3,
            totalPages: 1,
            userId: '',
            commentContent: ''
        },
        computed: {
            pageNumbers() {
                const pages = [];
                for (let i = 1; i <= this.article.commentPage.pages; i++) {
                    pages.push(i);
                }
                return pages;
            }
        },
        mounted: async function () {
            const urlParams = new URLSearchParams(window.location.search)
            this.articleId = urlParams.get('articleId')
            if (this.articleId) {
                try {
                    let response = await axios({
                        url: `http://localhost:8080/article/show/comments/${this.articleId}/${this.commentPageNum}/${this.commentPageSize}`,
                        method: "GET"
                    })
                    console.log(response)
                    this.article = response.data
                    this.totalPages = response.data.commentPage.pages
                } catch (error) {
                    console.error('请求文章详情数据时出错:', error)
                }
            }
        },
        methods: {
            changePage(page) {
                this.commentPageNum = page;
                this.fetchArticleDetails();
            },
            prevPage() {
                if (this.commentPageNum > 1) {
                    this.commentPageNum--;
                    this.fetchArticleDetails();
                }
            },
            nextPage() {
                if (this.commentPageNum < this.article.commentPage.pages) {
                    this.commentPageNum++;
                    this.fetchArticleDetails();
                }
            },
            async fetchArticleDetails() {
                try {
                    let response = await axios({
                        url: `http://localhost:8080/article/show/comments/${this.articleId}/${this.commentPageNum}/${this.commentPageSize}`,
                        method: "GET"
                    })
                    console.log(response)
                    this.article = response.data
                    this.totalPages = response.data.commentPage.pages
                } catch (error) {
                    console.error('请求文章详情数据时出错:', error)
                }
            },
            async submitComment() {
                if (!this.userId || !this.commentContent) {
                    alert('请输入用户 ID 和评论内容');
                    return;
                }
                try {
                    const commentData = {
                        userId: this.userId,
                        articleId: this.articleId,
                        commentContent: this.commentContent
                    };
                    const response = await axios.post('http://localhost:8080/comment/save', commentData);
                    if (response.data === true) {
                        console.log('评论提交成功', response.data);
                        this.userId = '';
                        this.commentContent = '';
                        this.fetchArticleDetails();
                    } else {
                        alert('评论提交失败，请检查输入或稍后再试');
                    }
                } catch (error) {
                    console.error('评论提交失败:', error);
                    alert('评论提交失败，请检查网络或稍后再试');
                }
            }
        }
    })
</script>
</body>

</html>